<template>
	<div>
		<div>
			<el-row>
				<el-col :span="12">
					<div class="grid-content"></div>
				</el-col>
				<el-col :span="12">
					<div>
						<el-input placeholder="请输入内容" v-model="inputfid" class="input-with-select">
							<el-select v-model="select" slot="prepend" placeholder="请选择">
								<el-option label="货运单编号" value="1"></el-option>
							</el-select>
							<el-button slot="append" icon="el-icon-search" @click="findByFid()"></el-button>
						</el-input>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="text-align: left;">
			<el-button type="danger" plain icon="el-icon-delete" @click="delMore()">批量删除</el-button>
		</div>
		<div>
			<el-table :data="tableData" border style="width: 100%" :cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center'}" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column fixed prop="fid" label="货运单编号" width="300">
				</el-table-column>
				<el-table-column prop="customerInformations.name" label="发货客户" width="120">
				</el-table-column>
				<el-table-column prop="customerIns.name" label="收货客户" width="120">
				</el-table-column>
				<el-table-column prop="freightContracts.payment" label="应收货款(元)" width="120">
				</el-table-column>
				<el-table-column prop="afterReceivables" label="变更后金额(元)" width="120">
				</el-table-column>
				<el-table-column prop="commission" label="应收佣金(元)" width="120">
				</el-table-column>
				<el-table-column prop="commissionRate" label="佣金率(%)" width="120">
					<template slot-scope="scope">
						<span v-if="scope.row.freightContracts.refundtype == 1">0.01</span>
						<span v-if="scope.row.freightContracts.refundtype == 2">0.02</span>
					</template>
				</el-table-column>
				<el-table-column prop="commissionReceive" label="实收佣金(元)" width="120">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="danger" plain size="small" @click="delhistroy(scope.$index, scope.row)">删除历史</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="text-align: right;" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[5,10]"
				:page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				inputfid: '',
				select: '',
				tableData: [],
				currentPage: 1,
				pageSize: 5,
				pageInfo: {},
				dialogFormVisible: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px'
			}
		},
		methods: {
			//多选的值存到数组
			handleSelectionChange(val) {

				this.multipleSelection = val;

			},
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
			//批量删除
			delMore() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const length = this.multipleSelection.length;

					for (let i = 0; i < length; i++) {
						for (let j = 0; j < this.tableData.length; j++) {
							if (this.multipleSelection[i] == this.tableData[j]) {
								//删除后端数据
								this.axios.delete("http://localhost:8080/collectionsettle/" + this.tableData[j].id, "")
									.then((res) => {
										this.$message({
											type: 'success',
											message: '删除成功!'
										});
									})
								
								//删除前端页面
								this.tableData.splice(j, 1);
								//刷新页面
								this.getList();
							}
						}


					}

					
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//删除单条
			delhistroy(index,row) {
				console.log(index, row);
				
				this.$confirm('此条记录将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//发送ajax
					this.axios.delete("http://localhost:8080/collectionsettle/"+row.id).then(res =>{
						if(res.data.code == 200){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
						this.getList();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
				  message: '已取消删除'
					});
				});
			},
			//分页查询
			getList() {
				//发送ajax
				this.axios.get("http://localhost:8080/collectionsettle/" + this.currentPage + "/" + this.pageSize).then(
					res => {
						console.log(res.data.data);
						//this.pageInfo = res.data.data;
						let tData = [];
						let j = 0;
						for(let i = 0;i<res.data.data.list.length;i++){
							if(res.data.data.list[i].isPayment == 1 && res.data.data.list[i].freightContracts.freightStatus.isCollection != 0){
								tData[j] = res.data.data.list[i]
								j++;
							}
						}
						
						this.tableData = tData;
						this.pageInfo.total = tData.length;
					})
			},
			//搜索功能
			findByFid() {
				//发送ajax
				this.axios.get("http://localhost:8080/collectionsettle/" + this.inputfid).then(
					res => {
						//console.log(res.data.data);
						this.tableData = [];
						var re = [];
						//console.log(res.data.data.isPayment);
			
						if (res.data.data.isPayment == 1 && res.data.data.freightContracts.freightStatus.isCollection != 0) {
							re.push(res.data.data);
							this.tableData = re;
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.pageInfo.total = 1;
						}else{
							this.$message({
								message: '订单未结算',
								type: 'warning'
							});
							this.pageInfo.total = 0;
						}
						
						//console.log(this.tabledata);
					})
			}
		},
		//初始化列表
		created() {
			this.getList();
		}
	}
</script>

<style>
</style>
